<template>
  <div class="vc-text-xl vc-font-semibold vc-py-2">动画</div>
  <div>
    <button
      class="vc-btn vc-mr-1"
      :class="{ 'vc-btn-blue': curAnimateClass === AnimateClass.blink }"
      @click="selectClass(AnimateClass.blink)"
    >
      闪烁
    </button>
  </div>
</template>
<script setup lang="ts">
import { CSSProperties, ref, watch } from "vue";
import { LabelValueOriginalProps, SetPropsExpose, AnimateClass, Condition } from "./types";
import { ConfigurationInstance, LabelValueJSON } from "/@/components/types";

const props = defineProps<{
  compInstance: ConfigurationInstance<LabelValueJSON, LabelValueOriginalProps>;
}>();

const curAnimateClass = ref<AnimateClass | "">("");
function selectClass(cls) {
  curAnimateClass.value = curAnimateClass.value === cls ? "" : cls;
  previewCondition({
    animateClass: curAnimateClass.value,
  });
}

function previewCondition(condition: Partial<Condition>) {
  if (props.compInstance && props.compInstance.previewCondition) {
    props.compInstance.previewCondition(condition);
  }
}

const myExpose: SetPropsExpose = {
  clear() {},
  setCondition(condition) {},
  getSetResult() {
    return false;
  },
};
defineExpose(myExpose);
</script>
